<template>
<div style="margin-top: 100px">
  <el-container>
    <el-aside width="200px">
      <el-col >
<!--        default-openeds=[1,2,3]-->
        <el-menu
            :default-openeds=ar
            router
            class="el-menu-vertical-demo">
          <el-submenu :index="ar[0]">
            <template slot="title">
              <i class="el-icon-circle-plus-outline"></i>
              <span>我是买家</span>
            </template>
            <el-menu-item index="/shop">我的购物车</el-menu-item>
            <el-menu-item index="/mine/order">我的订单</el-menu-item>
            <el-menu-item index="/mine/collection">我的收藏</el-menu-item>
            <el-menu-item index="/mine/myBooks">我买到的书</el-menu-item>
          </el-submenu>
          <el-submenu :index="ar[1]">
            <template slot="title">
              <i class="el-icon-circle-plus-outline"></i>
              <span>账户安全管理</span>
            </template>
            <el-menu-item index="/mine/personalData">个人资料</el-menu-item>
            <el-menu-item index="/mine/coupon">我的优惠券</el-menu-item>
            <el-menu-item index="/mine/password">修改登录密码</el-menu-item>
            <el-menu-item index="/mine/phone">修改绑定手机</el-menu-item>
            <el-menu-item index="/mine/email">绑定邮箱</el-menu-item>
            <el-menu-item index="/mine/realMe">实名认证</el-menu-item>
          </el-submenu>

          <el-submenu :index="ar[2]">
            <template slot="title">
              <i class="el-icon-circle-plus-outline"></i>
              <span>客服服务</span>
            </template>
            <el-menu-item index="1-1">客服消息</el-menu-item>
            <el-menu-item index="1-1">售后服务</el-menu-item>
            <el-menu-item index="1-1">投诉管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  name: "Mine",
  data(){
    return{
      ar:['1','2','3']
    }
  },

}
</script>

<style scoped>

</style>